<template>
  <a-modal
    :open="open"
    :title="$t('role.assignPermissions')"
    :confirm-loading="loading"
    :ok-text="$t('common.submit')"
    :cancel-text="$t('common.cancel')"
    @ok="handleSubmit"
    @cancel="updateOpen(false)"
    width="600px"
  >
    <a-tree
      v-if="open"
      checkable
      :tree-data="permissionTree"
      :checked-keys="modelValue"
      @update:checked-keys="handleCheckedKeysChange"
      :default-expanded-keys="defaultExpandedKeys"
    />
  </a-modal>
</template>

<script lang="ts" setup>
import type { DataNode } from 'ant-design-vue/es/tree'
import type { Key } from 'ant-design-vue/es/vc-tree/interface'

defineOptions({
  name: 'PermissionModal'
})

// Props定义
withDefaults(defineProps<{
  open: boolean
  permissionTree: DataNode[]
  modelValue: Key[]
  defaultExpandedKeys?: Key[]
  loading?: boolean
}>(), {
  modelValue: () => [],
  defaultExpandedKeys: () => [],
  loading: false,
  permissionTree: () => []
})

// Emits定义
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'update:modelValue', value: Key[]): void
  (e: 'submit'): void
}>()

// 更新open状态
const updateOpen = (value: boolean) => {
  emit('update:open', value)
}

// 处理选中键的变化
const handleCheckedKeysChange = (checkedKeys: Key[]) => {
  emit('update:modelValue', checkedKeys)
}

// 提交
const handleSubmit = () => {
  emit('submit')
}
</script> 